<template>
    <div>
        <div>
            <el-row :gutter="24">
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今日销售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今日销售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.todaySaleMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今日零售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今日零售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.todayRetailMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今日采购</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今日采购单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.todayPurchaseMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>本月累计销售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计本月销售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.monthSaleMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>本月累计零售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计本月零售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.monthRetailMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>本月累计采购</span>
                                <span class="chart-card-action">
                                    <el-tooltip popper-class="abc" content="统计本月采购单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.monthPurchaseMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>昨日销售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计昨日销售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yesterdaySaleMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>昨日零售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计昨日零售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yesterdayRetailMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>昨日采购</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计昨日采购单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yesterdayPurchaseMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今年累计销售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今年销售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yearSaleMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今年累计零售</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今年零售单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yearRetailMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '0px 20px 6px' }">
                        <template #header>
                            <div class="meta">
                                <span>今年累计采购</span>
                                <span class="chart-card-action">
                                    <el-tooltip content="统计今年采购单据的总金额" placement="top" effect="dark">
                                        <el-icon>
                                            <WarningFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </span>
                            </div>
                        </template>
                        <div>
                            <p style="margin: 10px 0;">￥{{ homeData.yearPurchaseMoney }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!-- 柱状图 -->
            <el-row :gutter="24">
                <el-col :span="8" :offset="0">
                    <e-charts ref="chart1" class="chart" :option="saleOption"></e-charts>
                </el-col>
                <el-col :span="8" :offset="0">
                    <e-charts ref="chart2" class="chart" :option="retailOption"></e-charts>
                </el-col>
                <el-col :span="8" :offset="0">
                    <e-charts ref="chart3" class="chart" :option="purchaseOption"></e-charts>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24" :offset="0">
                    <span class="ant-tag-blue">授权用户：{{ homeData.grantUserNumber }}</span>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/api/request'

let homeData = ref({})


const saleOption = ref({})
const retailOption = ref({})
const purchaseOption = ref({})


let chart1 = ref(null)
let chart2 = ref(null)
let chart3 = ref(null)

const getData = async () => {
    await request.get('role/getHomeData').then(resp => {
        homeData.value = resp.data
        // 延迟更新柱状图
        updateChartData();
    })
}

const updateChartData = () => {
    if (homeData.value) {
        const saleChartData = {
            title: {
                text: '销售统计',
                left: '20px',
                top: '20px',
                bottom: '20px'
            },
            xAxis: {
                type: 'category',
                data: homeData.value.saleList.map(d => d.date) // 这里确保 saleList 是有效的  
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: homeData.value.saleList.map(d => d.money),
                    type: 'bar',
                    barWidth: '44%'
                }
            ],
            tooltip: {
                trigger: "axis",
                triggerOn: "mousemove",
                alwaysShowContent: true,
                position: function (pt) {
                    return [pt[0], 130];
                },
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: 'rgba(145, 145, 145, 0.3)'
                    }
                }
            }
        };
        const retailChartData = {
            title: {
                text: '零售统计',
                left: '20px',
                top: '20px',
                bottom: '20px'
            },
            xAxis: {
                type: 'category',
                data: homeData.value.retailList.map(d => d.date) // 这里确保 saleList 是有效的  
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: homeData.value.retailList.map(d => d.money),
                    type: 'bar',
                    barWidth: '44%'
                }
            ],
            tooltip: {
                trigger: "axis",
                triggerOn: "mousemove",
                alwaysShowContent: true,
                position: function (pt) {
                    return [pt[0], 130];
                },
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: 'rgba(145, 145, 145, 0.3)'
                    }
                }
            }
        };
        const purchaseChartData = {
            title: {
                text: '采购统计',
                left: '20px',
                top: '20px',
                bottom: '20px'
            },
            xAxis: {
                type: 'category',
                data: homeData.value.purchaseList.map(d => d.date) // 这里确保 saleList 是有效的  
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: homeData.value.purchaseList.map(d => d.money),
                    type: 'bar',
                    barWidth: '44%'
                }
            ],
            tooltip: {
                trigger: "axis",
                triggerOn: "mousemove",
                alwaysShowContent: true,
                position: function (pt) {
                    return [pt[0], 130];
                },
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: 'rgba(145, 145, 145, 0.3)'
                    }
                }
            }
        };
        saleOption.value = saleChartData;
        retailOption.value = retailChartData
        purchaseOption.value = purchaseChartData
    }
}


// window.onresize = function () {
//chart1.value.resize();
//chart2.value.resize();
//chart3.value.resize();
// };



onMounted(() => {
    getData()
})

</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-card ::v-deep(.el-card__header) {
    color: #8c8c9e;
    border-bottom: none;
}

.el-card ::v-deep(.el-card__body) {
    font-size: 28px;
}

.meta {
    position: relative;
}

.chart-card-action {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.chart {
    width: 100%;
    height: 400px;
}

.ant-tag-blue {
    color: #1890ff;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 14px;
    margin-right: 10px;
}
</style>
